<script>
// 应用模板
import WorkSpaceQuery from '@/mixins/WorkspaceQuery';
import { getLocalTime } from '@/utils/helps';

export default {
  name: 'AppTemplate',
  mixins: [WorkSpaceQuery],
  data() {
    return {
      // 演示数据
      appList: [
        {
          name: 'ts1',
          id: 'ts1',
          appUrl:
            'http://192.168.1.166:8060/require_gtzyb/index.html#/edit/0/0000000062d3609c0162d64933850000/ts1',
        },
        {
          name: '智慧物流',
          id: '智慧物流',
          appUrl: 'http://192.168.1.166:8060/wl/index.html#!/',
        },
        {
          name: '供给侧专题',
          id: '供给侧专题',
          appUrl: 'http://192.168.1.166:8060/gtzy-light/index.html#/dashboard',
        },
        {
          name: '房地产专题',
          id: '房地产专题',
          appUrl: 'http://192.168.1.166:8060/gtzy-light/index.html#/dashboard1',
        },
        {
          name: '国土资源大数据展示专题',
          id: '国土资源大数据展示专题',
          appUrl: 'http://192.168.1.166:8060/bigdata/hbsgtzy.html',
        },
        {
          name: 'KTW大数据能力 - 智慧国土',
          id: 'KTW大数据能力 - 智慧国土',
          appUrl: 'http://192.168.1.166:8060/bigdata/hbsgtzy.html',
        },
        {
          name: '农产品产地重金属污染大数据展示',
          id: '农产品产地重金属污染大数据展示',
          appUrl: 'http://192.168.1.166:8060/bigdata/zjswr.html',
        },
        {
          name: '全国国土资源——执法专题',
          id: '全国国土资源——执法专题',
          appUrl: 'http://192.168.1.166:8060/bigdata/gtzyb/weifa/index.html',
        },
        {
          name: '全国国土资源——矿产专题',
          id: '全国国土资源——矿产专题',
          appUrl: 'http://192.168.1.166:8060/bigdata/gtzyb/kuangchan/index.html',
        },
        {
          name: '全国国土资源——基础设施专题',
          id: '全国国土资源——基础设施专题',
          appUrl: 'http://192.168.1.166:8060/bigdata/gtzyb/jichusheshi/index.html',
        },
        {
          name: '全国国土资源——工矿仓储用地',
          id: '全国国土资源——工矿仓储用地',
          appUrl: 'http://192.168.1.166:8060/bigdata/gtzyb/gongkuangcangchu/index.html',
        },
        {
          name: '全国国土资源——供地专题',
          id: '全国国土资源——供地专题',
          appUrl: 'http://192.168.1.166:8060/bigdata/gtzyb/gongdi/contry.html',
        },
        {
          name: '全国国土资源——全国耕地保护专题',
          id: '全国国土资源——全国耕地保护专题',
          appUrl: 'http://192.168.1.166:8060/bigdata/gtzyb/gengdi/contry.html',
        },
        {
          name: '全国国土资源——房地产专题',
          id: '全国国土资源——房地产专题',
          appUrl: 'http://192.168.1.166:8060/bigdata/gtzyb/fangchan/contry.html',
        },
        {
          name: '影像智能识别与搜索',
          id: '影像智能识别与搜索',
          appUrl: 'http://192.168.1.166:8060/img/tensorFlow.jpg',
        },
      ],
      keyword: '',
      appUrl: '',
      selectModalOpened: false, //选择弹框是否打开
      dataModalOpened: false, //新增弹框是否打开
      appTemplateList: [],
    };
  },
  async created() {
    const getAppList = await this.getAppList(
      {
        typeId: '95500',
      },
      1,
      100
    );
    getAppList.data.dataSource.forEach(item => {
      this.appTemplateList.push({
        id: item.id,
        name: item.name,
        path: item.path,
        status: 0,
        alterTime: getLocalTime(item.createTime),
        img: require('../../../assets/covers/1.jpg'),
      });
    });
  },
  methods: {
    doQuery() {},
    selectAppList(item) {
      this.appData = this.appList.find(list => list.id === item);
      if (this.appData.appUrl) {
        this.appUrl = this.appData.appUrl;
      }
    },
    async addNewAppTemplate() {
      this.dataModalOpened = true;
      if (this.appData.appUrl) {
        const response = await this.addNewApp(
          {
            path: this.appUrl,
          },
          {
            alias: this.appData.name,
            name: this.appData.name,
            orgId: this.$store.state.user.info.orgid,
            typeId: '95500',
            userId: this.$store.state.user.info.id,
          }
        );
        this.appTemplateList.unshift({
          id: response.data,
          name: this.appData.name,
          path: this.appUrl,
          status: 0,
          alterTime: getLocalTime(Date.parse(new Date())),
          img: require('../../../assets/covers/1.jpg'),
        });
      }
    },
    ShowAppTemplate(item) {
      window.open(item.path);
    },
  },
};
</script>
<template>
  <div class="datav-apptemplate">
    <div class="template-header">
      <Input
        v-model="keyword"
        placeholder="输入应用模板名称按Enter键搜索..."
        icon="search"
        @keyup.native.enter="doQuery()"></Input>
      <Button
        type="primary"
        @click="selectModalOpened=true"
      >
        <Icon type="plus"></Icon>
        新增
      </Button>
      <Modal
        v-model="selectModalOpened"
        width="400px"
        @on-ok="addNewAppTemplate">
        <p slot="header">
          选择应用链接
        </p>
        <div class="temp-modal-content">
          <p>输入应用链接：</p>
          <Input
            v-model="appUrl"
            placeholder="请输入外部链接..."></Input>
          <p>推荐外部链接：</p>
          <DataList
            :dataList="appList"
            @on-selectList="selectAppList"></DataList>
        </div>
      </Modal>
    </div>
    <div class="applist">
      <Row
        type="flex"
        justify="start"
        class="code-row-bg">
        <Card
          v-for="(item,index) in appTemplateList"
          :key="index"
          @click.native="ShowAppTemplate(item)">
          <div class="appdata">
            <img :src="item.img">
          </div>
          <div>
            <Row>
              <Col span="18">
              <h4>{{ item.name }}</h4>
              </Col>
              <Col
                v-if="item.status===0"
                span="6"
              >
              <p>
                <Icon type="ios-person"></Icon>
                <span>私有</span>
              </p>
              </Col>
              <Col
                v-if="item.status===1"
                span="6"
              >
              <Icon type="ios-people"></Icon>
              <span>公有</span>
              </Col>
            </Row>
            <Row>
              <Icon type="calendar"></Icon>
              <span>{{ item.alterTime }}</span>
            </Row>
          </div>
        </Card>
      </Row>
    </div>
  </div>
</template>

<style lang="less" scoped>
.datav-apptemplate {
  .template-header {
    height: 50px;
    line-height: 50px;
    background-color: #f2f2f2;
    padding: 0 15px;
    .k-input-wrapper {
      width: 250px;
      margin-right: 5px;
    }
  }

  .applist {
    text-align: center;
    height: calc(~'100vh - 160px');
    overflow: hidden;

    .k-card {
      margin: 10px 10px;
      width: 17%;
      height: 180px;
      cursor: pointer;

      /deep/.k-card-body {
        padding: 0;
        width: 100%;
        height: 100%;
      }

      .appdata {
        text-align: center; // background: repeating-linear-gradient(to top left,
        // #459aee, #7ebfff);
        img {
          width: 100%;
          height: 100%;
        }
      }

      :last-child {
        .k-row:last-child {
          text-align: right;
        }
        h4 {
          text-align: left;
          color: dodgerblue;
        }
      }
    }
  }
}

/deep/.k-modal {
  .k-modal-body {
    padding: 8px 16px;
  }
  .temp-modal-content {
    p {
      height: 15px;
      margin: 10px 0;
    }
  }
}
</style>
